<template>
  <div class="stockDeviceType">
    <div class="card-table">
      <el-button
        style="margin-bottom: 12px"
        icon="el-icon-plus"
        type="primary"
        @click="dialogVisible1 = true"
        >新增</el-button
      >
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column align="center" label="工艺" width="width">
          <template slot-scope="{ row }">
            {{ row.dates }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="所属组"
          width="width"
        >
          <template slot-scope="{ row }">
            {{ row.group }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button @click="xiugai(row)" type="text">修改</el-button>
            <el-button
              style="margin-left: 0"
              @click="deleteOne(row)"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :modal-append-to-body="false"
        title="添加工艺"
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <el-form
          :rules="rules1"
          size="small"
          ref="formCreate"
          :model="formCreate"
          label-width="80px"
        >
          <el-form-item label="工艺" prop="name">
            <el-input v-model="formCreate.name"></el-input>
          </el-form-item>
          <el-form-item label="库管" prop="unit">
            <el-input v-model="formCreate.unit"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('formCreate')">取 消</el-button>
          <el-button type="primary" @click="created()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :modal-append-to-body="false"
        title="修改工艺"
        :visible.sync="dialogVisible2"
        width="30%"
      >
        <el-form
          :rules="rules1"
          size="small"
          ref="formCreate"
          :model="formCreate"
          label-width="80px"
        >
          <el-form-item label="工艺" prop="name">
            <el-input v-model="formCreate.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="库管" prop="unit">
            <el-input v-model="formCreate.unit"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('formEdit')">取 消</el-button>
          <el-button type="primary" @click="edit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  CraftgetAll,
  Craftcreate,
  Craftupdata,
  Craftdelete,
  stockDeviceTypeGet,
} from "@/api/stock/workmanship";

export default {
  name: "stockDeviceType",
  components: {},
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      stockDeviceTypes: [],
      _id: "",
      formCreate: {
        name: "",
        unit: "",
      },
      formEdit: {
        name: "",
        stockDeviceType: {},
      },
      tableData: [],
      rules1: {
        name: [{ required: true, message: "请输入工艺名称", trigger: "blur" }],
        unit: [{ required: true, message: "请输入库管名称", trigger: "blur" }],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData();
    stockDeviceTypeGet().then((res) => {
      // console.log(222, res)
      this.stockDeviceTypes = res.data.data.pageData;
    });
  },
  methods: {
    getData() {
      CraftgetAll().then((res) => {
        this.tableData = res.data.data.pageData;
      });
    },
    xiugai(row) {
      this.dialogVisible2 = true;
      // console.log(row);
      this._id = row._id;
      this.formCreate.name = row.dates;
      this.formCreate.unit = row.group;
    },
    deleteOne(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            _id: row._id,
          };
          Craftdelete(params).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getData();
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    created() {
      this.$refs.formCreate.validate((valid) => {
        if (valid) {
          const params = {
            dates: this.formCreate.name,
            group: this.formCreate.unit,
          };
          console.log(params);
          Craftcreate(params).then((res) => {
            if (res.data.code === 200) {
              console.log(res.data);
              this.$message({
                type: "success",
                message: "创建成功",
              });
              this.getData();
              this.dialogVisible1 = false;
              this.$refs.formCreate.resetFields();
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    edit() {
      const params = {
        dates: this.formCreate.name,
        group: this.formCreate.unit,
        _id: this._id,
      };
      console.log(params);
      Craftupdata(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.getData();
          this.dialogVisible2 = false;
          this.formCreate.name = "";
          this.formCreate.unit = "";
          this.$refs.formEdit.resetFields();
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    resetForm(formName) {
      this.formCreate.name = "";
      this.formCreate.unit = "";
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style  scoped></style>
